<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" th:with="title='首页',active='index'"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:bb="">
<head>
    <title>在线支付-Javabb论坛</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css">
    <style>
        body {
            background-color: #eee;
            min-width: 1000px;
        }

        .topbar {
            background: #81868B;
            color: #fff;
            text-align: right;
            line-height: 26px;
            font-size: 12px;
        }

        .topbar a {
            color: #fff;
            padding-left: 15px;
            border-left: 1px solid #686D71;
            margin-left: 10px;
        }

        .topbar a:hover {
            text-decoration: underline;
        }

        .header {
            height: 60px;
            background-color: #fff;
            border-bottom: 1px solid #d9d9d9;
        }

        .alipay-logo {
            height: 40px;
            position: absolute;
            display: block;
            width: 114px;
            top: 10px;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-image: url(https://t.alipayobjects.com/images/T1HHFgXXVeXXXXXXXX.png)
        }

        .logo-title {
            font-size: 16px;
            font-weight: normal;
            font-family: "Microsoft YaHei", 微软雅黑, "宋体";
            border-left: 1px solid #676d70;
            color: #676d70;
            padding: 5px 15px;
            position: absolute;
            left: 130px;
            top: 15px;
        }

        .layui-container {
            width: 950px;
            padding: 0;
        }

        .goods-name {
            font-weight: 700;
            font-size: 16px;
            color: #000;
        }

        .goods-money {
            font-size: 22px;
            line-height: 22px;
            color: #f60;
            font-weight: bold;
        }

        .card {
            background: #fff;
            border-top: 3px solid #b3b3b3;
            border-bottom: 3px solid #b3b3b3;
            margin-top: 20px;
            height: 500px;
            margin-bottom: 100px;
        }

        .lable-info {
            position: absolute;
            right: 25px;
            height: 21px;
            padding: 2px 8px 0px;
            font-weight: 700;
            background: #b3b3b3;
            color: #fff;
            font-size: 12px;
        }

        .card-left {
            position: absolute;
            right: 157px;
            left: 0;
            text-align: center;
        }

        .card-right {
            position: absolute;
            right: 0;
            width: 157px;
            border-left: 1px solid #d9d9d9;
            height: 500px;
            background: #E6E6E6;
        }

        .qrcode-group {
            display: inline-block;
            padding: 6px;
            border: 1px solid #d3d3d3;
            -webkit-box-shadow: 1px 1px 1px #ccc;
            box-shadow: 1px 1px 1px #ccc;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .qrcode-desc {
            padding: 10px 0 6px;
        }

        .fn-left {
            display: inline-block;
            vertical-align: middle;
            font-size: 12px;
            margin-left: 10px;
        }

        .qrguide-area img {
            position: absolute;
            top: 60px;
            left: 500px;
            cursor: pointer;
        }

        .layui-layer-setwin .layui-layer-close2 {
            right: -10px !important;
            top: -10px !important;
        }
    </style>
</head>
<body>

<input type="hidden" id="syTime" value="300"/>
<input type="hidden" id="orderNo" th:value="${payModel.orderId}">
<input type="hidden" id="payNumber" value="https://qr.alipay.com/fkx09883wg5hfeybn4mku6d"/>

<div class="topbar">
    <div class="layui-container">
        你好，欢迎使用支付宝付款！
        <a href="https://help.alipay.com/lab/help_detail.htm?help_id=258086" target="_blank">常见问题</a>
    </div>
</div>

<div class="header">
    <div class="layui-container">
        <div class="alipay-logo"></div>
        <div class="logo-title">我的收银台</div>
    </div>
</div>

<div class="layui-container">
    <div style="margin-top: 30px;padding-left: 20px;">
        <div style="font-size: 13px;">正在使用即时到账交易 <a id="paySM" href="javascript:;" style="color: #08c;">[?]</a></div>
        <div style="margin-top: 15px;">
            <span class="goods-name">VIP</span>&emsp;&emsp;
            <span style="font-size: 12px;">收款方：*豹</span>
        </div>
        <div style="position: absolute;right: 25px;top:15px;font-size: 12px;">
            <span class="goods-money" th:text="${payModel.money}">49.9</span> 元
        </div>
    </div>

    <div class="lable-info">订单详情</div>

    <div class="card">
        <div class="card-left">
            <p style="margin-top: 75px;margin-bottom: 10px;font-size: 12px;">扫一扫付款（元）</p>
            <p class="goods-money" style="font-size: 26px;" th:text="${payModel.money}">49.9</p>
            <div class="qrcode-group">
                <div style="width: 168px;height: 168px;">
                    <div style="width: 168px;height: 168px;position: absolute;">
                        <img id="qrcode" style="width: 168px;height: 168px;" th:src="${payModel.qr}"/>
                        <img src="https://t.alipayobjects.com/tfscom/T1Z5XfXdxmXXXXXXXX.png"
                             style="position: absolute;top: 50%;left: 50%;width:42px;height:42px;margin-left: -21px;margin-top: -21px">
                    </div>
                </div>
                <div class="qrcode-desc">
                    <img src="https://t.alipayobjects.com/images/T1bdtfXfdiXXXXXXXX.png" width="28px" height="28px">
                    <div class="fn-left">打开手机支付宝<br>扫一扫继续付款</div>
                </div>
            </div>
            <br>
            <a id="btnDownApp" href="javascript:;" style="color: #a6a6a6;font-size:12px;text-decoration: underline;">首次使用请下载支付宝</a>
            <div class="qrguide-area">
                <img src="https://t.alipayobjects.com/images/rmsweb/T13CpgXf8mXXXXXXXX.png"
                     width="204px" height="183px">
                <img src="https://t.alipayobjects.com/images/rmsweb/T1ASFgXdtnXXXXXXXX.png"
                     width="204px" height="183px">
            </div>
        </div>
        <div class="card-right" style="text-align: center;">
            <p style="margin-top: 150px;margin-bottom: 10px;">支付剩余</p>
            <div style="margin-bottom: 80px;text-align: center;">
                <span class="layui-badge layui-bg-blue" id="timeM">05</span> 分
                <span class="layui-badge layui-bg-blue" id="timeS">00</span> 秒
            </div>
            <div style="text-align: center;">
                <button id="btnCancel" class="layui-btn layui-btn-danger" style="width: 110px;">取消订单</button>
                <br><br>
                <button id="btnFinish" class="layui-btn layui-btn-normal" style="width: 110px;">等待支付(30s)</button>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tipHtml">
    <div style="padding:3px;color: #333;font-size: 14px;">
        <h2 style="font-size: 14px;color: #333;font-weight: bold;margin-bottom: 3px;">付款后资金直接进入对方账户</h2>
        若发生退款需联系收款方协商，如付款给陌生人，请谨慎操作。
    </div>
</script>

<script src="/assets/libs/layui/layui.js?v=2451" type="text/javascript"></script>
<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        // 扫描指引轮播图
        $('.qrguide-area img').eq(0).animate({
            opacity: 'toggle'
        }, 500);
        $('.qrguide-area').click(function () {
            $(this).find('img').each(function () {
                $(this).animate({
                    opacity: 'toggle'
                }, 500);
            });
        });

        // 交易风险提示
        $('#paySM').on('mouseenter', function () {
            layer.tips($('#tipHtml').html(), this, {tips: [2, '#fff'], time: -1});
            $('.layui-layer-tips').css('top', '107px');
            $('.layui-layer-tips').css('width', '429px');
        }).on('mouseleave', function () {
            layer.closeAll('tips');
        });

        // 下载APP
        $('#btnDownApp').click(function () {
            layer.open({
                type: 2,
                area: ['700px', '400px'],
                offset: '88px',
                title: false,
                content: 'https://cmspromo.alipay.com/down/new.htm'
            });
        });

        // 倒计时
        var isGo = false;
        var syTime = $('#syTime').val();
        setInterval(function () {
            if (syTime <= 0) {
                if (!isGo) {
                    isGo = true;
                    layer.load(2);
                    layer.msg('支付时间已结束', {icon: 2, time: 5000}, function () {
                        location.replace('myOrder');
                    });
                }
            } else {
                syTime--;
                var syM = parseInt(syTime / 60);
                var sys = parseInt(syTime % 60);
                $('#timeM').text(syM > 9 ? syM : '0' + syM);
                $('#timeS').text(sys > 9 ? sys : '0' + sys);
                //
                if (syM <= 3) {
                    $('#btnFinish').text('已完成支付');
                    $('#btnFinish').removeClass('layui-btn-disabled');
                    $('#btnFinish').addClass('layui-btn-normal');
                    $('#btnFinish').removeAttr('disabled');
                } else {
                    $('#btnFinish').text('等待支付(' + sys + 's)');
                    $('#btnFinish').addClass('layui-btn-disabled');
                    $('#btnFinish').removeClass('layui-btn-normal');
                    $('#btnFinish').attr('disabled', 'disabled');
                }
            }
        }, 1000);

        // 取消订单
        /*function doCancelOrder() {
            layer.load(2);
            $.post('cancelOrder', {
                orderNumber: $('#orderNumber').val()
            }, function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    location.replace('myOrder');
                } else {
                    layer.closeAll('loading');
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json');
        }*/

        // 取消订单按钮点击事件
        /*$('#btnCancel').click(function () {
            layer.confirm('确定取消订单？', {
                title: '取消订单',
                icon: 3,
                btn: ['确定', '关闭']
            }, function (index, layero) {
                layer.close(index);
                doCancelOrder();
            });
        });*/

        // 完成支付
        /* $('#btnFinish').click(function () {
             location.replace('myOrder');
         });
        */
         // 获取订单状态
         setInterval(function () {
             $.get('/pay/queryOrder', {
                 orderNo: $('#orderNo').val()
             }, function (res) {
                 if (res.success) {
                     layer.msg('恭喜您，支付成功！', {icon: 1});
                     /*if (res.orderState == 1) {
                         layer.msg('恭喜您，支付成功！', {icon: 1});
                         location.replace('/');
                     } else if (res.orderState == 2) {
                         layer.msg('订单已取消', {icon: 1});
                         location.replace('myOrder');
                     } else if (res.orderState == 3) {
                         layer.msg('订单已过期', {icon: 1});
                         location.replace('myOrder');
                     }*/
                 }else{
                     /*layer.msg('支付失败或者订单过期，请重新提交', {icon: 1});
                     location.replace('/pay/pay');*/
                 }
             }, 'json');
         }, 3000);

    });
</script>
</body>
</html>